<template>
    <div class="filter-wrap">
        <a-form layout="inline" :model="form">
            <a-row :gutter="24">
                <a-col :span="8">
                    <a-form-item label="关键字" style="margin-bottom: 0">
                        <a-input v-model:value="form.name" placeholder="请输入版本名称关键字" />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="状态" style="margin-bottom: 0">
                        <a-select placeholder="请选择" v-model:value="form.status">
                            <a-select-option :key="item.code" v-for="item of dicOptions.versionStatus">
                                {{ item.dimensionName }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="流程状态" style="margin-bottom: 0">
                        <a-select placeholder="请选择" v-model:value="form.processStatus">
                            <a-select-option :key="item.code" v-for="item of dicOptions.processStatus">
                                {{ item.dimensionName }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="上线时间">
                        <a-range-picker @change="rangeDateChange" />
                    </a-form-item>
                </a-col>
                <a-col :span="16" :style="{ textAlign: 'right' }" key="btn">
                    <a-form-item style="margin-bottom: 0">
                        <a-button @click="handleReset">重置</a-button>
                        <a-button type="primary" style="margin-left: 8px" @click="handleSearch">查询</a-button>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <a-divider dashed />
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    setup(_, { emit }) {
        const state = reactive<any>({
            form: {
                name: '',
                status: null,
                processStatus: null,
                startTime: '',
                endTime: ''
            }
        });
        const rangeDateChange = (date, dateString) => {
            state.form.startTime = dateString[0];
            state.form.endTime = dateString[1];
        };
        // 重置搜索条件
        const handleReset = () => {
            state.form = {
                name: '',
                status: null,
                processStatus: null,
                startTime: '',
                endTime: ''
            };
        };
        const handleSearch = () => {
            emit('search', state.form);
        };
        return {
            ...toRefs(state),
            rangeDateChange,
            handleReset,
            handleSearch
        };
    }
});
</script>